<template>
  <div class="article-page">
    <div class="pic">
      <img src="../assets/logobxg.png" alt="">
      <img class="serach" @click="$router.push('/search')" src="../assets/search@3x.png" alt="">
    </div>
    <van-divider />
<van-tabs @click="onClick" line-width="20px" color="#165DFF" sticky v-model="activeName">
  <van-tab  v-for="(item) in channels" :key='item.id' :title="item.name" :name="item.name">
    <article-item v-for="items in articles" :key="items.art_id" :items="items"></article-item>
  </van-tab>
</van-tabs>

  </div>
</template>
<script>
import { getNav, getList } from '@/api/article'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  components: {
    ArticleItem
  },
  name: 'article-page',
  data () {
    return {
      channels: [],
      articles: [],
      channel_id: '0',
      activeName: '推荐'
    }
  },
  async created () {
    this.getNav()
    this.getList(this.channel_id)
  },
  methods: {
    onClick (name, title) {
      console.log(name, title)
      console.log(this.activeName)
      const { id } = this.channels.find(item => item.name === title)
      this.getList(id)
    },
    async getNav () {
      const res = await getNav()
      this.channels = res.data.channels
      console.log('channel', res)
    },
    async getList () {
      const resArticle = await getList({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      console.log(resArticle)
      this.articles = resArticle.data.results
    }
  }
}
</script>

<style lang="less" scoped>

.article{
    &-page {
    padding-top: 25px;
    padding-bottom: 25px;
    }
    }
 .pic{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15px;
  padding-left: 23px;
  padding-right: 23px;
 img{
  width: 100px;
 }
 .serach{
  width: 22px;
 }
 }

</style>
